<template>
  <div>
    <el-row v-if="!isAdd" class="mb8">
      <div class="top-right-btn">
        <el-button type="primary" @click="submitSizeForm">保存</el-button>
      </div>
    </el-row>
    <el-form
      ref="editSizeForm"
      inline
      :rules="rules"
      :model="sizeForm"
      label-width="120px"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="报关金额限值" prop="tariffAmountLimit">
            <el-input-number
              v-model="sizeForm.tariffAmountLimit"        
              clearable
              controls-position="right"
            ></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="报关重量限值"
            prop="tariffWeightLimit"
          >
            <el-input v-model="sizeForm.tariffWeightLimit" clearable style="width: 85%;"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="周长" prop="perimeter">
            <el-input-number
              v-model="sizeForm.perimeter"
              clearable
              controls-position="right"
            ></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="第一边" prop="firstSide">
            <el-input-number
              v-model="sizeForm.firstSide"
              clearable
              controls-position="right"
            ></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="第二边" prop="secondSide">
            <el-input-number
              v-model="sizeForm.secondSide"
              clearable
              controls-position="right"
            ></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script lang="ts" setup>
import { ref, getCurrentInstance, defineProps, onMounted } from 'vue'
import { ElMessage, ElButton } from 'element-plus'
import {
  getDetails,
  editData,
} from '@/api/BusinessConfig/serviceChannel'

// 尺寸限制验证
const validate = (rule, value, callback) => {
  switch (rule.field) {
    case 'perimeter':
      if (!value) {
        callback(new Error('请输入周长'))
      // eslint-disable-next-line no-restricted-globals
      } else if (isNaN(value)) {
        callback(new Error('周长必须为数字'))
      } else if (value > 3.3) {
        callback(new Error('周长不可大于3.3米'))
      } else {
        callback()
      }
      break
    case 'firstSide':
      if (!value) {
        callback(new Error('请输入第一边'))
      // eslint-disable-next-line no-restricted-globals
      } else if (isNaN(value)) {
        callback(new Error('第一边必须为数字'))
      } else if (value > 1.2) {
        callback(new Error('第一边不可大于1.2米'))
      } else {
        callback()
      }
      break
    default:
      if (!value) {
        callback(new Error('请输入第二边'))
      // eslint-disable-next-line no-restricted-globals
      } else if (isNaN(value)) {
        callback(new Error('第二边必须为数字'))
      } else if (value > 0.7) {
        callback(new Error('第二边不可大于0.7米'))
      } else {
        callback()
      }
      break
  }
}
const props = defineProps({
  isAdd: {
    type: Boolean,
  },
  productId: {
    type: Number,
  },
})
const
  sizeForm = ref({
    id: undefined,
    tariffAmountLimit: undefined,
    tariffWeightLimit: undefined,
    perimeter: undefined,
    firstSide: undefined,
    secondSide: undefined,
  }),
  rules = {
    perimeter: [{ required: true, validator: validate, trigger: 'blur' }],
    firstSide: [{ required: true, validator: validate, trigger: 'blur' }],
    secondSide: [{ required: true, validator: validate, trigger: 'blur' }],
  },
  editSizeForm = ref(null),
  {
    proxy,
  }:{
  proxy:any
} = getCurrentInstance()
const reset = () => {
  sizeForm.value = {
    id: undefined,
    tariffAmountLimit: undefined,
    tariffWeightLimit: undefined,
    perimeter: undefined,
    firstSide: undefined,
    secondSide: undefined,
  }
  proxy.$resetForm(editSizeForm.value)
}
const getList = (id) => {
  getDetails(id).then(res => {
    if (res.code == 200) {
      sizeForm.value = res.data
    }
  })
}
onMounted(() => {
  getList(props.productId)
})
const submitSizeForm = () => {
  proxy.$validateForm(editSizeForm.value, () => {
    // eslint-disable-next-line prefer-const
    let dataSizeForm = new FormData()
    sizeForm.value.id = props.productId
    const serviceChannel = JSON.stringify(sizeForm.value)
    dataSizeForm.append('serviceChannel', serviceChannel)
    editData(dataSizeForm).then(res => {
      if (res.code == 200) {
        ElMessage.success('修改成功')
        reset()
        getList(props.productId)
      }
    })
  })
}
</script>